<template>
  <div>
    <van-nav-bar
        title="路线"
        left-text="返回"
        left-arrow
        @click-left="onClickRightM"
    />
    <div id="map-container">
      <div id="my-panel"></div>
    </div>

  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {map} from "core-js/internals/array-iteration";

export default ({
  name: 'MendiandituView',
  unmounted() {
    this.map?.destroy();
  },
  created() {
    // this.fanhui()
  },
  mounted() {
    this.initMapM()
  },
  methods: {
    onClickRightM() {
      this.$router.go(-1)
    },
    initMapM() {
      var endL = this.$route.query.a;
      window._AMapSecurityConfig = {
        securityJsCode: "9e336152b304845112d85b48a5e21c24",
      };
      //睡眠
      AMapLoader.load({
        key: "b9ebf1495abfabb76269509a1b81833a", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", 'AMap.Geolocation'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
        // 初始化地图
        const map = new AMap.Map('map-container', {
          viewMode: "3D", // 是否为3D地图模式
          resizeEnable: true,
          zoom: 13,
        });

        //地位到当前位置
        AMap.plugin('AMap.Geolocation', function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: "RB",
          });
          geolocation.getCurrentPosition(function (status, result) {
            if (status == 'complete') {
              onComplete(result, endL)
            } else {
              onError(result)
            }
          });



          function onComplete(data, endL) {
            var startLngLat = [data.position.getLng(), data.position.getLat()];
            var endLngLat = endL.split(",");
            let newArray =[parseFloat(endLngLat[0]), parseFloat(endLngLat[1])]
            console.log("newArray", newArray);
            console.log("startLngLat", startLngLat)
            console.log("endLngLat", endLngLat)
            //引入和创建驾车规划插件
            AMap.plugin(["AMap.Driving"], function () {
              const driving = new AMap.Driving({
                policy: 0, //驾车路线规划策略，0是速度优先的策略
                extensions: "all",
                // 是否显示实时路况
                showDir: true,
                map: map,
                panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
              });
              //获取起终点规划线路
              driving.search(startLngLat, newArray, function (status, result) {
                console.log("result", result)
                console.log("status", status)
                if (status === "complete") {
                  //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                  //查询成功时，result 即为对应的驾车导航信息
                  console.log(result);

                } else {
                  console.log("获取驾车数据失败：" + result);

                  window.location.reload()
                }
              });
            });
            // data是具体的定位信息
          }

          function onError(data) {
            console.log(data)
            // 定位出错
          }
        })

      });
    },
  },
})
</script>

<style scoped>
#home_container {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: rgb(199, 214, 228);
}

#map_wrap {
  z-index: 10;
  position: absolute;
  top: 5%;

  height: 95%;
  width: 100%;
}

.jiantou {
  font-size: 20px;
}

#my-panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 46px;
  left: 10px;
  width: 160px;
  height: 200px;
  z-index: 1000;
}

#my-panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#my-panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}

#map-container {
  width: 100%;
  height: calc(100vh);
}
</style>
